<template>
	<div class="login">
		<div class="head">
			<Logo></Logo>
		</div>
		<div class="main">
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" size="default" status-icon>
				<h2>登录</h2>
				<el-form-item prop="username"><el-input v-model="ruleForm.username" placeholder="账号" /></el-form-item>
				<el-form-item prop="password"><el-input v-model="ruleForm.password" placeholder="密码" /></el-form-item>
				<el-button type="primary" class="submit" style="width: 100%;" @click="submitForm()">登录</el-button>
			</el-form>
		</div>
		<div class="footer">
			<p>
				<span>©2022 hnc 版权所有 湘ICP备19018386号-2</span>
				<span>技术支持：湖南长沙优赞科技有限公司</span>
			</p>
		</div>
	</div>
</template>

<script>
import Logo from '@/components/Logo.vue';
export default {
	name: 'loginView',
	components:{
		Logo
	},
	data() {
		return {
			ruleForm: {},
			rules: {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				]
			}
		};
	},
	methods: {
		submitForm() {
			this.$refs.ruleFormRef.validate(valid => {
				console.log(valid);
				this.$http.post('/users/login', this.ruleForm).then(res => {
					console.log(res);
					if (res.status == 200) {
						if(res.data.role!=1){
							this.$message({
								message: '该用户没有权限',
								type: 'warning'
							});
							return
						}
						this.$message({
							message: '登录成功',
							type: 'success'
						});
						sessionStorage.setItem('userInfo',JSON.stringify(res.data))
						this.$router.push('/')
					}
				})
			})
		}
	}
};
</script>

<style scoped lang="less">
.login {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	// background-image: url(../../assets/images/login-bg.jpg);
	
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding: 20px;
	align-items: center;

	.head {
		color: #fff;
		align-self: flex-start;

		
	}

	.main {
		width: 400px;
		height: 300px;
		padding: 60px;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		box-shadow: 0px 0px 10px 4px #000000;

		.demo-ruleForm {
			width: 100%;

			h2 {
				font-size: 22px;
				margin-bottom: 20px;
			}
		}

		.submit {
			background-image: url(~@/assets/images/login-bg.jpg);
			border: none;
			background-size: 1000px;
			background-position: center;

			&:hover {
				box-shadow: 0 0 10px 1px #d9eaed;
			}
		}
	}

	.footer {
		text-align: center;
		color: #eee;

		span {
			margin-right: 50px;
			font-size: 12px;
		}
	}
}
</style>
